<template>
  <div>
    <FloatingBubble :downtime="downtime" v-if="showtime" />
    <van-popup v-model="showrecharge" class="modalbg" :close-on-click-overlay="false" round>
      <div class="modal-recharge">
        <div class="recharge-title">
          {{ $t('title.doc54') }}
          <img src="./assets/images/closeicon.png" alt="" v-if="tipsinfo.description != undefined"
            @click="showrecharge = false">
        </div>
        <div class="recharge-desc">
          <div v-html="tipsinfo.content" v-if="tipsinfo.description == undefined"></div>
          <div v-html="tipsinfo.description" v-else></div>
        </div>
        <div class="recharge-btn" v-if="tipsinfo.description == undefined">
          <div @click="showrecharge = false">
            <p>{{ $t('title.doc55') }}</p>
          </div>
          <div @click="handlerrouter">{{ $t('title.doc56') }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { bus } from "@/utils/http";
export default {
  mounted() {
    setTimeout(() => {
      this.showrecharge = false;
      this.$post(this.URL.home.activation, {}).then(res => {
        if (res.code == 0) {
          if (!res.data.hasOpen) {
            bus.$emit('showpopup', 0);
          } else if (res.data.hasOpen && res.data.hasActivation) {
            bus.$emit('showpopup', res.data.countdownSecond);
          }
        }
      })
    }, 5000);
    bus.$on("showpopup", function (data) {
      if (data == 0) {
        _this.showtime = false;
      } else {
        _this.showtime = true;
        _this.downtime = data;
      }


    });
    bus.$on("showrules", function (data) {
      _this.showrecharge = true;
      if (data == 0) {
        _this.getTipsInfo('WITHDRAW_TIMELIMIT_RULESTWO')
      } else if (data == 1) {
        _this.getTipsInfo('WITHDRAW_TIMELIMIT_RULES')
      } else {
        _this.tipsinfo = data;
      }

    });
  },
  methods: {
    getTipsInfo(type) {
      const params = { categoryType: type }
      this.$post(this.URL.home.article, params).then(res => {
        if (res.code == 0) {
          this.tipsinfo = res.data;
          this.showrecharge = true;
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
.modal-recharge {
  width: calc(100vw - 1.04rem);
  max-width: 7.5rem;
  padding: .4rem;

  .recharge-title {
    position: relative;
    margin-bottom: .4rem;
    font-size: .32rem;
    color: #FFFFFF;
    text-align: center;
    line-height: .32rem;

    img {
      position: absolute;
      top: 0;
      right: 0;
      width: .32rem;
      height: .32rem;
    }
  }

  .recharge-desc {
    height: 6rem;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;


    &::-webkit-scrollbar {
      width: .1rem;
      height: .8rem;
      display: block;
    }

    /* 滚动条上的滚动滑块。样式 */
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #0570FD;
    }

    /* 鼠标悬停时，设置滑块的背景颜色为深灰色 */
    &::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0);
    }

    /* 鼠标按下时，设置滑块的背景颜色为灰色 */
    &::-webkit-scrollbar-thumb:active {
      background-color: rgba(255, 255, 255, 0);
    }

    div {
      font-size: .28rem;
      color: #fff;

      /deep/ p {
        font-size: .28rem;
        color: #fff;

        img {
          width: 100%;
          margin: .2rem 0;
          height: inherit !important;
        }
      }

      /deep/ img {
        width: 100%;
        margin: .2rem 0;
        height: inherit !important;
      }
    }
  }

  .recharge-btn {
    display: flex;
    margin-top: .4rem;
    justify-content: space-between;

    div {
      flex: 1;
      height: .88rem;
      padding: .02rem;
      background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%);
      border-radius: .48rem;
      font-size: .32rem;
      color: #FFFFFF;
      text-align: center;
      line-height: .84rem;
      box-sizing: border-box;

      &:first-child {
        margin-right: .26rem;

        p {
          height: .84rem;
          background: #1A202E;
          border-radius: .4rem;
        }
      }
    }
  }
}
</style>